<template>
  <div>
    <StepIdCard v-if="step === 0" @next="onIdCardNext" />
    <StepFace v-if="step === 1" @next="onFaceNext" />
    <StepResult
      v-if="step === 2"
      :userId="userId"
      :idFrontUrl="idFrontUrl"
      :idBackUrl="idBackUrl"
      :name="name"
      :id="id"
      :videoBlob="videoBlob"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import StepIdCard from './StepIdCard.vue'
import StepFace from './StepFace.vue'
import StepResult from './StepResult.vue'

const step = ref(0)
const userId = ref('1') // 实际应为登录用户id
const idFrontUrl = ref('')
const idBackUrl = ref('')
const name = ref('')
const id = ref('')
const videoBlob = ref(null)

function onIdCardNext(data) {
  name.value = data.name
  id.value = data.id
  idFrontUrl.value = data.idFrontUrl
  idBackUrl.value = data.idBackUrl
  step.value = 1
}
function onFaceNext(data) {
  videoBlob.value = data.videoBlob
  step.value = 2
}
</script>